<template>
    <el-card>
        <el-date-picker
                v-model="beginTime"
                type="date"
                placeholder="Pick a day"
                :size="size"
        />
        <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="Pick a day"
                :size="size"
        />
        <el-button :icon="Search" circle @click="getDishTop"/>
        <div class="test">
            <div ref="echartRef" class="echart"></div>
        </div>
    </el-card>
</template>
<script setup>
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
    } from '@element-plus/icons-vue'
    import axios from "axios";
    import { reactive,ref, onMounted,onBeforeMount } from 'vue'
    import * as echarts from 'echarts';
    const echartRef = ref()
    let arrDishName=[5, 20, 36, 10, 10, 20]
    let arrDishNumber=['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    const arr=ref([])
    let beginTime=ref(new Date()-7 * 24 * 60 * 60 * 1000)
    let endTime=ref(new Date())
    let dateList=[]
    let success=[]
    let unSuccess=[]
    let total=[]
    onBeforeMount(()=>{
        let beginDate=new Date(beginTime.value).format("yyyy-MM-dd")
        let endDate=new Date(endTime.value).format("yyyy-MM-dd")
        axios.get("api/merchant/getOrderNumber",{
            params:{
                begin:beginDate,
                end:endDate
            }
        }).then(res=>{
            console.log(res.data);
            dateList=res.data.data.dateList
            success=res.data.data.success
            unSuccess=res.data.data.unSuccess
            total=res.data.data.total
            const myChart = echarts.init(echartRef.value);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '每日订单数量统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['订单总数', '成功订单','退款订单']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:dateList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '订单总数',
                        type: 'line',
                        data: total
                    },
                    {
                        name: '成功订单',
                        type: 'line',
                        data: success
                    },
                    {
                        name: '退款订单',
                        type: 'line',
                        data: unSuccess
                    },
                ]
            });
        })
    })
    const getDishTop=()=>{
        if(beginTime>endTime){
            ElMessage.error("查询的起始时间应该大于查询结束时间")
        }else{
            let beginDate=new Date(beginTime.value).format("yyyy-MM-dd")
            let endDate=new Date(endTime.value).format("yyyy-MM-dd")
            axios.get("api/merchant/getDishTop",{
                params:{
                    begin:beginDate,
                    end:endDate
                }
            }).then(res=>{
                arrDishNumber=res.data.data.number;
                arrDishName=res.data.data.dishName;
                const myChart = echarts.init(echartRef.value);
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '销量前十'
                    },
                    tooltip: {},
                    xAxis: {
                        data: arrDishName
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: arrDishNumber
                        }
                    ]
                });
            })
        }
    }
</script>
<style  scoped>
    .echart {
        width: 100%;
        height: 500px;
    }
</style>
